<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类</title>
    <link rel="stylesheet" href="./css/public.css">
    <style>
        body {
            background: #EEEEEE;
        }
        .pur_top {
            display: block;
            width: 100%;
            height: 6.213rem;
        }
        .info_num {
            width: 8.8rem;
            margin: 0 auto;
            border-radius:0.4rem;
            box-sizing: border-box;
            padding: 0 0.24rem;
            background: #fff;
            padding-bottom: 0.933rem;
            margin-top: -1.226rem;
            position: relative;
            z-index: 99;
            box-shadow:0px 0.133rem 0.186rem 1px rgba(136,136,136,0.33);
        }
        .info_num_title {
            padding: 0.56rem 0;
            text-align: center;
            color: #82573E;
            font-size: 0.533rem;
            border-bottom: #EEEEEE solid 1px;
            box-sizing: border-box;
            margin-bottom: 0.533rem;
        }
        .info {
            box-sizing: border-box;
            padding: 0 0.346rem;
            color: #272727;
            font-size: 0.4rem;
            margin-top: 0.266rem;
        }
        .num {
            padding: 0 0.346rem;
            box-sizing: border-box;
            justify-content: space-between;
            align-items: center;
            margin-top: 1.6rem;
        }
        .num_t {
            font-size: 13px;
            color: #8E8E8E;
        }
        .num_btns {
            font-size: 12px;
            color: #414141;
            width: 2.426rem;
            height: 0.56rem;
            border:1px solid rgba(210,210,210,1);
            justify-content: space-between;
            align-items: center;
            padding: 0 0.266rem;
            box-sizing: border-box;
        } 
        .num_reduce,.num_add {
            font-size: 20px;
            color: #8E8E8E;
            /* font-weight: bold; */
        }
        .pur_btn {
            width:7.946rem;
            height:1.173rem;
            background:linear-gradient(-90deg,rgba(255,107,49,1) 0%,rgba(255,107,49,1) 100%);
            border-radius:0.586rem;
            line-height: 1.173rem;
            text-align: center;
            color: #fff;
            font-size: 0.48rem;
            margin: 0 auto;
            margin-top: 0.853rem;
        }
    </style>
    <script src="./js/index.js"></script>
</head>

<body>
    <main>
        <img class="pur_top" src="./img/pur_top.png" alt="">
        <div class="info_num">
            <div class="info_num_title">iphone</div>
            <div class="info">名称： iphone 7</div>
            <div class="info">类别:   二手物品</div>
            <div class="info">报价： 5097</div>
            <div class="info">补充： 机身颜色 白色；ROM 64GB；</div>
            <div class="flex num">
                <div class="num_t">购买数量</div>
                <div class="flex num_btns">
                    <div class="num_reduce">-</div>
                    <div class="pur_num">1</div>
                    <div class="num_add">+</div>
                </div>
            </div>
        </div>
        <div class="pur_btn">立即购买</div>
    </main>

    <script src="./js/jquery.js"></script>
    <script src="./js/public.js"></script>
    <script>
        $('.num_add').click(function() {
            var num = $('.pur_num').text();
            num++;
            $('.pur_num').text(num);
        })
        $('.num_reduce').click(function() {
            var num = $('.pur_num').text();
            num--;
            if(num==0) {
                num=1;
            }
            $('.pur_num').text(num);
        })
    </script>
</body>

</html>